{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}管理中心{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-fileinput/css/fileinput.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-fileinput/css/fileinput-rtl.min.css' %}">
    <style>
        .file {
            margin-top: 60px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }
        .panel{
            margin-bottom: 0px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid file">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div>
                    <a href="{% url 'file' project_id=request.tracer.project.id %}">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>文件库</span>
                    </a>
                    {% for item in data_breadcrumb %}
                        <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                            <i class="fa fa-caret-right" aria-hidden="true"></i>
                            <span>{{ item.name }}</span>
                        </a>
                    {% endfor %}
                </div>
                <div class="function">
                    {#                    <div class="btn btn-primary btn-xs upload" style="position: relative">#}
                    {#                        <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>#}
                    {#                        <input type="file" multiple name="uploadFile" id="uploadFile">#}
                    {#                    </div>#}
                    <button type="button" class="btn btn-primary btn-xs upload" style="position: relative"
                            data-toggle="modal" data-target="#exampleModal" data-whatever="文件上传">
                        <i class="fa fa-upload" aria-hidden="true"></i> 上传文件
                    </button>
                    <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                    </a>
                    {#                    <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="编辑文件夹">#}
                    {#                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 编辑文件夹#}
                    {#                    </a>#}
                </div>
            </div>

            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>文件/文件夹名称</th>
                    <th>文件大小</th>
                    <th>更新者</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in data %}
                    <tr>
                        <th scope="row">
                            {% if item.file_type == 1 %}
                                <i class="fa fa-file" aria-hidden="true"></i>
                                {{ item.name }}
                            {% else %}
                                <a href="{% url 'file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                                    <i class="fa fa-folder" aria-hidden="true"></i>
                                    {{ item.name }}
                                </a>
                            {% endif %}
                        </th>
                        <td>
                            {% if item.file_type == 1 %}
                                {{ item.file_size }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ item.update_user.user_name }}</td>
                        <td>{{ item.update_datetime }}</td>
                        <td>
                            {% if item.file_type == 2 %}
                                <a class="btn btn-default btn-xs editFolderBtn"
                                   data-toggle="modal"
                                   data-name="{{ item.name }}"
                                   data-fid="{{ item.id }}"
                                   data-target="#addModal"
                                   data-whatever="修改文件夹">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                            {% else %}
                                <a class="btn btn-default btn-xs file_download" data-fid="{{ item.id }}">
                                    <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                </a>
                                <a class="btn btn-default btn-xs file_show" data-fid="{{ item.id }}"
                                   data-whatever="查看文件">
                                    <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                </a>
                            {% endif %}

                            <a class="btn btn-danger btn-xs"
                               data-toggle="modal"
                               data-fid="{{ item.id }}"
                               data-ftype="{{ item.file_type }}"
                               data-target="#alertModal">
                                <i class="fa fa-trash" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="clearfix">
            <ul class="pagination" style="float: right">
                {{ page_string }}
            </ul>
        </div>
    </div>
    <!-- Modal 创建文件夹 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="file_form" method="post">
                        {% csrf_token %}
                        <input class="hidden" name="fid" id="fid">
                        {% for filed in form %}
                            <div class="form-group">
                                <label for="{{ filed.id_for_label }}">{{ filed.label }}</label>
                                {{ filed }}
                                <span class="error-msg">{{ filed.errors.0 }}</span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">提 交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 上传文件 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="file-loading">
                        <input id="input-b9" name="input-b9[]" multiple type="file">
                    </div>
                    <div id="kartik-file-errors"></div>
                </div>
                {#                <div class="modal-footer">#}
                {#                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取 消</button>#}
                {#                    <button id="btnUpload" type="button" class="btn btn-primary">提 交</button>#}
                {#                </div>#}
            </div>
        </div>
    </div>
    <!-- pdf预览弹窗 -->
    <div class="modal fade" id="showFileModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    {#                    <iframe id="pdfshowiframe" width="100%" height="620px" src="../../../static/uploads/xxx.pdf"></iframe>#}
                    <object type="application/pdf" data='../../../static/uploads/xxx.pdf' width="100%" height="620px">
                        >
                    </object>
                </div>
            </div>
        </div>
    </div>
    <!-- 警告框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>是否要确定删除？</h4>
                <p style="padding-top: 20px;padding-bottom: 20px;">
                    文件/文件夹删除后将无法恢复。
                </p>
                <p style="text-align: right;">
                    <a class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
                    <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
                </p>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-fileinput/js/plugins/buffer.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-fileinput/js/plugins/filetype.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-fileinput/js/plugins/piexif.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-fileinput/js/plugins/sortable.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-fileinput/js/fileinput.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-fileinput/js/locales/zh.js' %}"></script>
    <script>
        var FILE_DELETE_URL = "{% url 'file_delete' project_id=request.tracer.project.id %}";
        $(function () {
            initAddModal();
            initDeleteModal();
            initUploadModal();
            BindBtnSubmitClick();
            BindBtnFileInputClick();
            BindBtnFileDownLoadClick();
            //BindBtnEidtFolderClick();
            bindDeleteSubmit();
        })

        $(document).ready(function () {
        });

        // 自定义模态框底部的提交按钮，上传文件
        function BindBtnFileInputClick() {
            $("#btnUpload").click(function () {
                $('#input-b9').fileinput('upload');
            })
        }

        // 初始化模态框，按钮绑定事件 当模态框显示时执行
        function initAddModal() {
            $('#addModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var recipient = button.data('whatever'); // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this);
                // 根据按钮的data-whatever属性值来定义模态框的标题
                modal.find('.modal-title').text(recipient);
                //modal.find('.modal-body input').val(recipient);
                console.log(button.attr('data-fid'));
                if (button.attr('data-fid')) {
                    // 点击编辑文件夹按钮
                    var folder_name = button.attr('data-name');
                    //$("#file_form").find("#id_name").val(folder_name);
                    modal.find("#id_name").val(folder_name);
                    modal.find("#fid").val(button.attr('data-fid'));
                    // 弹出时清空错误提示
                    modal.find('.error-msg').empty();
                } else {
                    // 点击新建文件夹按钮 清空表单
                    $("#file_form")[0].reset();
                    modal.find('.error-msg').empty();
                }


            })
        }

        <!-- 创建/修改文件夹模态框提交按钮点击事件 -->
        function BindBtnSubmitClick() {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: location.href,
                    data: $("#file_form").serialize(),
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href;
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })

        }

        //初始化文件上传模态框，绑定按钮事件， 当模态框显示时执行
        function initUploadModal() {
            $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var recipient = button.data('whatever'); // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this);
                // 根据按钮的data-whatever属性值来定义模态框的标题
                modal.find('.modal-title').text(recipient);
                //modal.find('.modal-body input').val(recipient);
                // 清空表单
                {#$("#file_form")[0].reset();#}
                modal.find('#kartik-file-errors').empty();
                modal.find('.fileinput-remove-button').click();
            });
            $('#exampleModal').on('hidden.bs.modal', function (e) {
                window.location.reload();
            })
            //初始化文件上传控件
            $("#input-b9").fileinput({
                showPreview: true,
                showUpload: true,
                elErrorContainer: '#kartik-file-errors',
                allowedFileExtensions: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "ofd", "jpg", "jpeg", "png", "gif", "txt", "mp3", "mp4", "rar", "zip", "gz", "7z"],
                uploadUrl: '{% url 'file_uploads' project_id=request.tracer.project.id %}',
                uploadExtraData: {'folder_id': "{{ folder_id }}",},
                language: "zh",
                maxFileSize: 10240000 * {{ request.tracer.price_policy.file_size }},//单位为kb，如果为0表示不限制文件大小,10M
                //minFileCount: 0,
                maxFileCount: 10, //表示允许同时上传的最大文件个数
                fileActionSettings: {
                    {#showZoom: true,#}
                    {#showDrag: true,#}

                },

            });
        }

        <!-- 文件下载按钮点击事件 -->
        function BindBtnFileDownLoadClick() {
            $(".file_download").click(function (enent) {
                var t = $(this);//当前点击的下载按钮
                console.log(t.attr('data-fid'));
                var data_fid = t.attr('data-fid');// 下载按钮的 data_fid属性的值，即文件的id
                var url = "{% url 'file_download' project_id=request.tracer.project.id file_id='0000' %}"; //构造请求的url
                url = url = url.replace('0000', data_fid); //替换真实的 文件id
                console.log(url);
                $.ajax({
                    url: url,
                    type: "GET",
                    {#dataType: "JSON",#}
                    success: function (response, status, request) {
                        var disp = request.getResponseHeader('Content-Disposition');
                        console.log("===" + disp);
                        if (disp && disp.search('attachment') != -1) { //判断是否为文件
                            var form = $('<form action="' + url + '" method="post"></form>');
                            $('body').append(form);
                            form.submit();
                        } else {
                            console.log(response);
                            console.log(status);
                            console.log(request);
                            alert(response.errors + status + request.status);
                        }
                    }
                })
            })
            //<!-- 文件预览按钮点击事件 -->
            $(".file_show").click(function (enent) {
                var t = $(this);//当前点击的预览按钮
                console.log(t.attr('data-fid'));
                var data_fid = t.attr('data-fid');// 下载按钮的 data_fid属性的值，即文件的id
                var url = "{% url 'file_download' project_id=request.tracer.project.id file_id='0000' %}"; //构造请求的url
                url = url = url.replace('0000', data_fid); //替换真实的 文件id
                console.log(url);
                $('#showFileModal').modal('show');


            })
        }

        /** 已移除该方法 **/
        function BindBtnEidtFolderClick() {
            $(".editFolderBtn").click(function (event) {
                var t = $(this);//当前点击的修改文件夹按钮
                var folder_id = t.attr('data-fid');
                var folder_name = t.attr('data-name');

                console.log(folder_name);

                $("#myModalLabel").text("修改文件夹");
                /*** 发送ajax请求后台获取文件夹名称
                 $.ajax({
                    url:"{% url 'folder_edit' project_id=request.tracer.project.id folder_id=12345 %}".replace(/12345/, folder_id.toString()),
                    data:"",
                    type:"GET",
                    dataType: "JSON",
                    success:function (res) {
                        $("#file_form").find("#id_name").val(res.data);
                        console.log(res.data);
                    }
                })
                 **/
                $("#addModal").modal("show");
                $("#file_form").find("#id_name").val(folder_name);
            })
        }

        <!-- 初始化文件夹&文件删除弹出模态框 -->
        function initDeleteModal() {
            //
            $('#alertModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                //var recipient = button.data('whatever'); // Extract info from data-* attributes
                var fid = button.data('fid'); // Extract info from data-* attributes
                var ftype = button.data('ftype'); // Extract info from data-* attributes
                var modal = $(this);
                modal.find('#btnDelete').attr("fid", fid);
                modal.find('#btnDelete').attr("ftype", ftype);
                // 根据按钮的data-whatever属性值来定义模态框的标题
                //modal.find('.modal-title').text(recipient);
                //modal.find('.modal-body input').val(recipient);
                // 清空表单
                {#$("#file_form")[0].reset();#}
                //modal.find('#kartik-file-errors').empty();
                //modal.find('.fileinput-remove-button').click();
            });
        }

        <!-- 文件夹&文件删除按钮点击事件 -->
        function bindDeleteSubmit() {
            $('#btnDelete').click(function () {
                // 获取要删除那行ID
                $.ajax({
                    url: FILE_DELETE_URL,
                    type: "GET",
                    data: {fid: $(this).attr('fid'), ftype: $(this).attr('ftype')},
                    success: function (res) {
                        if (res.status) {
                            location.href = location.href;
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}